<template>
  <div class="app-container">
    <!-- 主表查询和其他操作 -->
    <el-form :inline="true" class="demo-form-inline filter">
      <div>
        <el-form-item label="客户名称">
          <el-select v-model="listQuery.fsiteNo" :disabled="this.$store.state.user.fsiteLevel == 3" clearable filterable
            placeholder="请选择客户名称">
            <el-option v-for="item in getListfsiteNo" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="台账日期">
          <el-date-picker v-model="alarmdate" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" />
        </el-form-item>
        <el-form-item label="企业名称">
          <el-select v-model="listQuery.enterpriseId" clearable filterable class="filter-item" placeholder="请选择企业名称">
            <el-option v-for="item in enterpriseIdList" :key="item.enterpriseId" :label="item.enterpriseName"
              :value="item.enterpriseId" />
          </el-select>
        </el-form-item>
        <el-form-item label="危废名称">
          <el-select v-model="listQuery.wasteId" clearable filterable class="filter-item" placeholder="请选择危废名称">
            <el-option v-for="item in wasteIdList" :key="item.id" :label="item.wasteName" :value="item.id" />
          </el-select>
        </el-form-item>
      </div>
      <div>
        <!-- <el-form-item label="危废代码">
          <el-select v-model="listQuery.wasteId" clearable filterable class="filter-item" placeholder="请选择危废代码">
            <el-option v-for="item in listMapping" :key="item.id" :label="item.wasteCode" :value="item.id" />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <!-- v-permission="['equipmentUse:useHead:read']" -->
          <el-button round size="medium" class="filter-item"
            :style="{ background: buttonColor.lookup, color: buttonColor.color }" @click="handleFilter">查找</el-button>
        </el-form-item>
      </div>
    </el-form>

    <!-- 主表查询结果 -->
    <el-table :height="buttonColor.clientHeightTwo" v-loading="listLoading" :data="list" stripe
      element-loading-text="正在查询中。。。" border fit highlight-current-row :header-cell-style="tableColor">
      <el-table-column :width="buttonColor.line" :index="indexMethod" align="center" label="序" type="index" />
      <el-table-column v-if="this.$store.state.user.fsiteLevel != 3" :formatter="formatfsiteNo" align="left"
        label="客户名称" prop="fsiteNo" />
      <el-table-column width="180" align="left" label="入库编号" prop="qrCode" />
      <el-table-column :formatter="formatfpointNo" align="left" label="贮存地点" prop="fpointNo" />
      <el-table-column :width="buttonColor.user" :formatter="formatforduser" align="left" label="出库人员"
        prop="rukuPerson" />
      <el-table-column :width="buttonColor.date" :formatter="datetimeFormat" align="left" label="出库日期"
        prop="rukuDate" />
      <el-table-column :formatter="formatwasteId" align="left" label="危废名称" prop="wasteId" />
      <el-table-column align="left" label="容器类型" prop="caskName" />
      <el-table-column width="180" align="left" label="固定资产码" prop="fequipmentbarcode" />
      <el-table-column width="130" align="left" label="设备序列号" prop="fmacno" />
      <el-table-column align="left" label="重量" prop="chanshengWeight" />
      <el-table-column align="left" :width="buttonColor.state" label="状态" prop="fstate">
        <template slot-scope="scope">
          <span :style="{ color: buttonColor.statedisable }" v-if="scope.row.isChuku === 1">出库</span>
          <span :style="{ color: buttonColor.statestart }" v-else>入库</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      @pagination="getList" />
  </div>
</template>

<style>
.button-margin {
  margin: 2px 0px;
}

.el-button+.el-button {
  margin-left: 1px;
}
</style>

<script>
import { wLabelList } from "@/api/dangerousWaste/repositoryManager";
import { listcustomWaste } from '@/api/dangerousWaste/customWaste'
import { fsiteOptionsByLevel, getListArea } from '@/api/area'
import { listenterpriseBasic } from '@/api/dangerousWaste/enterpriseBasic'
import { listcategoryMapping } from '@/api/dangerousWaste/categoryMapping'
import Pagination from "@/components/Pagination";
import moment from "moment";
import { tableColor, buttonColor } from "@/filters/index";

const statusMap = {
  0: '未确认',
  1: '已确认'
}

export default {
  name: "dangerInvChu",
  components: { Pagination },
  filters: {
    statusFilter(type) {
      return statusMap[type]
    }
  },
  data() {
    return {
      listMapping: [], //危废代码
      wasteIdList: [], //危废名称
      enterpriseIdList: [], //企业回显
      getListforduserAll: [], //人员回显
      getListfpointNoAll: [], //地点回显
      getListfsiteNo: [], // 客户列表
      list: null,
      total: 0,
      listLoading: true,
      alarmdate: null,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: undefined,
        isChuku: 1,
        minTime: undefined,
        maxTime: undefined,
        wasteId: undefined,
        enterpriseId: undefined,
        sort: "create_time",
        order: "desc",
      },
      tableColor,
      buttonColor,
    };
  },
  created() {
    this.listQuery.fsiteNo = this.$store.state.user.fsiteNo;
    this.alarmdate = [this.parserDate(moment(new Date().setDate(1)).format('YYYY-MM-DD')), new Date()]
    this.getList();
    // 危废名称
    listcustomWaste({ limit: -1, fsiteNo: this.$store.state.user.fsiteNo })
      .then(response => {
        this.wasteIdList = response.data.data.list
      })
      .catch(() => {
        this.wasteIdList = []
      })
    // 危废代码
    listcategoryMapping(this.listQuery)
      .then(response => {
        this.listMapping = response.data.data.list
      })
      .catch(() => {
        this.listMapping = []
      })
    // 处置企业
    listenterpriseBasic({ limit: -1, fsiteNo: this.$store.state.user.fsiteNo })
      .then(response => {
        this.enterpriseIdList = response.data.data.list
      })
      .catch(() => {
        this.enterpriseIdList = []
      })
    // 地点
    getListArea({ flag: 10 })
      .then(response => {
        this.getListfpointNoAll = response.data.data.list
      })
      .catch(() => {
        this.getListfpointNoAll = []
      })
    // 客户列表
    fsiteOptionsByLevel(3)
      .then(response => {
        this.getListfsiteNo = response.data.data.list
      })
      .catch(() => {
        this.getListfsiteNo = []
      })
    // 人员
    getListArea({ flag: 13 })
      .then(response => {
        this.getListforduserAll = response.data.data.list
      })
      .catch(() => {
        this.getListforduserAll = []
      })

  },
  methods: {
    parserDate(date) {
      var t = Date.parse(date)
      if (!isNaN(t)) {
        return new Date(Date.parse(date.replace(/-/g, '/')))
      }
    },
    // 危废名称
    formatwasteId: function (row, column) {
      if (this.wasteIdList) {
        for (let i = 0; i < this.wasteIdList.length; i++) {
          if (row.wasteId == this.wasteIdList[i].id) {
            return this.wasteIdList[i].wasteName
          }
        }
        return ''
      } else {
        return ''
      }
    },
    // 存放地点
    formatfpointNo: function (row, column) {
      if (this.getListfpointNoAll) {
        for (let i = 0; i < this.getListfpointNoAll.length; i++) {
          if (row.fpointNo === this.getListfpointNoAll[i].value) {
            return this.getListfpointNoAll[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },
    // 客户回显
    formatfsiteNo: function (row, column) {
      if (this.getListfsiteNo) {
        for (let i = 0; i < this.getListfsiteNo.length; i++) {
          if (row.fsiteNo === this.getListfsiteNo[i].value) {
            return this.getListfsiteNo[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },
    // 人员
    formatforduser: function (row, column) {
      if (this.getListforduserAll) {
        for (let i = 0; i < this.getListforduserAll.length; i++) {
          if (row.rukuPerson == this.getListforduserAll[i].value) {
            return this.getListforduserAll[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },

    datetimeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    },
    formatDate: function (date) {
      if (typeof (date) === 'object') {
        var ym
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        ym = y + '-' + m + '-' + d
        return ym
      } else {
        return date
      }

    },
    getList() {
      this.listQuery.minTime = this.alarmdate == null ? null : this.formatDate(this.alarmdate[0]) + '00:00:00'
      this.listQuery.maxTime = this.alarmdate == null ? null : this.formatDate(this.alarmdate[1]) + '23:59:59'
      this.listLoading = true;

      wLabelList(this.listQuery)
        .then((response) => {
          console.log('response', response);
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    indexMethod(index) {
      index = index + 1;
      return index;
    },
  },
};
</script>
